<template>
	<div class="card flex flex-v" :style="{ height: cardHeight }">
		<div class="card-hd flex flex-align-center flex-pack-justify" v-if="!noHeader" :class="{ bd: !noborder }">
			<div class="title flex-1">
				<slot name="cardtitle">{{ cardTitle }}</slot>
			</div>
			<div class=" filterbar" v-if="!noFilter">
				<a-select style="width: 120px" @change="handleChange" placeholder="全部" allowClear>
					<a-select-option :value="item.value" v-for="(item, index) in optionList">{{ item.text }}</a-select-option>
				</a-select>
			</div>
			<a href="javascript:;" class="more" v-if="!noMore" @click="showDetails">查看详情>></a>
		</div>
		<div class="card-bd flex-1"><slot></slot></div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		cardHeight: {
			type: [String, Number],
			default: '200px'
		},
		noHeader: {
			type: Boolean,
			default: false
		},
		noMore: {
			type: Boolean,
			default: false
		},
		cardTitle: {
			type: String,
			default: ''
		},
		componentKey: {
			type: String,
			default: ''
		},
		noFilter: {
			type: Boolean,
			default: true
		},
		noborder: {
			type: Boolean,
			default: false
		},
		optionList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		handleChange(e) {
			this.$emit('filter', e);
		},
		showDetails() {
			this.$emit('showDetails');
		}
	}
};
</script>

<style scoped lang="less">
.card {
	background: #fff;
	box-shadow: 0px 6px 18px rgba(117, 138, 165, 0.1);
	border-radius: 6px;
	margin: 6px 0;
	color: #24292e;
	width: 100%;
	.card-hd {
		font-size: 16px;
		padding: 0 18px;
		height: 63px;
		position: relative;
		&.bd::after {
			content: '';
			display: block;
			height: 1px;
			left: 18px;
			right: 18px;
			background: #f5f5f5;
			position: absolute;
			bottom: 0;
		}
		.more {
			color: #c8c8c8;
			color: #98a0a7;
			font-size: 16px;
		}
		.title {
			font-size: 18px;
			font-weight: bold;
			color: #24292e;
		}
	}
	.card-bd {
		position: relative;
	}
	.filterbar {
		// position: absolute;
		// right: 18px;
		// top: 14px;
		// z-index: 9999;
		margin-right: 20px;
	}
}
</style>
